<template>
 <div id="goods">
     <header class="header">
      <a href="javascript:void(0);" class="back" @click="goBack"></a>
      <div class="head-nav">
        <router-link tag="span" active-class="active" :to="'/goods/'+getGid">商品</router-link>
        <router-link tag="span" active-class="active" :to="'/goods/detail/'+getGid">详情</router-link>
        <router-link tag="span" active-class="active" :to="'/goods/review/'+getGid">评价</router-link>
      </div>
      <a href="javascript:void(0);" class="more" @click="moreClick"></a>
    </header>
      <transition>
          <div class="menuBox-nav flex" v-show="type" >
        <a href="/home" class="to">
            <p class="mNavIco1 bcg"></p>
            <div>首页</div>
        </a>
        <a href="/home/classify" class="to">
            <p class="mNavIco2 bcg"></p>
            <div>商品分类</div>
        </a>
        <a href="/home/cart" class="to">
            <p class="mNavIco3 bcg"></p>
            <div>购物车</div>
        </a>
        <a href="/home/user" class="to">
            <p class="mNavIco4 bcg"></p>
            <div>我的e宠</div>
        </a>
    </div>
      </transition>
    <router-view></router-view>
 </div>
</template>
 
<script>
export default {
    data(){
        return {
            type:false,
        }
    },
    computed: {
        getGid() {
        return this.$route.params.gid;
        },
        
  },
  methods:{
      goBack(){
        this.$router.go(-1)
    },
    moreClick() {
        this.type = !this.type
    }
  }
}
</script>
 
<style scoped lang = "stylus">
#goods 
    position relative
    z-index 999
    width 100%
    height 100%
    overflow auto
.serimgs
    width 100%
 .header {
  display: flex;
  align-items: center;
  width: 100%;
  color: #333;
  padding: 0 0.05rem;
  border-bottom: 1px solid #f3f3f3;

  a {
    display: inline-block;
    height: 0.35rem;
    width: 0.35rem;
  }

  a.back {
    background: url('https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png') 0 0 no-repeat; // static.epetbar.com/static_web/wap/dist/images/background/topIco.png) 0 0 no-repeat
    background-size: 35px auto;
  }

  a.more {
    background: url('https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png') 0 -70px no-repeat; // static.epetbar.com/static_web/wap/dist/images/background/topIco.png) 0 -70px no-repeat
    background-size: 35px auto;
  }

  .head-nav {
    flex: 1;
    font-size: 0.18rem;
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;

    span {
      margin: 0 0.05rem;
      padding-bottom: 0.11rem;
    }

    span.active {
      border-bottom: 2px solid #f03e3e;
    }
  }
}
.menuBox-nav
    position relative
    z-index -999
    left 0 
    width 100%
    height .65rem
    font-size: 14px;
    color: #666;
    text-align: center;
    padding-top: 11px;
    display flex
    .to
        flex 1      
        text-decoration none
        color #666
        .mNavIco1   
            background: url(../../assets/img/navIco.d8881a90.png) -1.72rem -.07rem no-repeat;
            display block
            width .25rem
            height .25rem
            margin: auto;
            background-size: 2.34rem 1.63rem;
        .mNavIco2
            background: url(../../assets/img/navIco.d8881a90.png) -1.72rem -.49rem no-repeat;
            display block
            width .25rem
            height .25rem
            margin: auto;
            background-size: 2.34rem 1.63rem;
        .mNavIco3
            background: url(../../assets/img/navIco.d8881a90.png) -1.72rem -.9rem no-repeat;
            display block
            width .25rem
            height .25rem
            margin: auto;
            background-size: 2.34rem 1.63rem;
        .mNavIco4
            background: url(../../assets/img/navIco.d8881a90.png) -1.72rem -1.33rem no-repeat;
            display block
            width .25rem
            height .25rem
            margin: auto;
            background-size: 2.34rem 1.63rem;

.bounce-enter-active,{

    animation bounce-in .3s
}
.bounce-leave-active {
    animation bounce-in .3s reverse
} 
.bounce-enter,{
}
.bounce-leave-to /* .fade-leave-active below version 2.1.8 */ {
}
@keyframes bounce-in {
  0% {
    top : 0
  }
  100% {
    top: -51px
  }
}
</style>